<template>
	<el-dialog title=""visible width="70%"  :show-close="false" :append-to-body="true" class="wrap" @close="cancel" :close-on-click-modal="false">
    <i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
	<div class="bt">添加学生</div>
 	<el-form label-width="100px" class="form">
		<el-collapse v-model="activeNames" >
		<el-collapse-item title="基本信息" accordion name="1" style="">
				<el-form-item label="中文名" class="select-block">
 				<el-input v-model="vzwm" placeholder="请输入中文名" icon="add" ></el-input>
 			</el-form-item>

 			<el-form-item label="正式班级" class="select-block">
				<el-input v-model="vbjmc"  :readonly='true' placeholder="请输入中文名" icon="add" ></el-input>
			</el-form-item>

 			<el-form-item label="英文名" class="select-block">
 				<el-input v-model="vywm" placeholder="请输入英文名" icon="add" ></el-input>
 			</el-form-item>

 			<el-form-item label="学生电话" class="select-block">
 				<el-input v-model="vdh" placeholder="请输入电话" class='input1' icon="add" ></el-input>
			    <span style="color: red;">*登陆电话</span>
 			</el-form-item>

 			<el-form-item label="缴费定金" class="select-block1" >
 				<el-input v-model="yuer" placeholder="请输入缴纳定金" icon="add" ></el-input>
 			</el-form-item>
			<!--<el-form-item label="学号" class="select-block">
				<el-input v-model="vxh" placeholder="请输入学号" icon="add" ></el-input>
			</el-form-item>-->
			<div class="select-block1" style="margin-top: 5px;width: 15%;">
						<el-select v-model="vsklx" placeholder="请选择支付方式" icon="add">
							<el-option label="支付宝" value="zfb"></el-option>
							<el-option label="微信" value="wx"></el-option>
							<el-option label="现金" value="xj"></el-option>
							<el-option label="刷卡" value="sk"></el-option>
						</el-select>
					</div>
 			<el-form-item label="性别" class="select-block">
				<el-select v-model="vxb"  placeholder="请选择性别" icon="add"style='width: 100%;'  >
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女" ></el-option>
				</el-select>
 			</el-form-item>
			<!-- <el-form-item label="学生标签" class="select-block2" >
					<div class="bqlist">

						<el-tag type="success" v-for="v in bqlist" class="list1" closable  @close = "" >{{v}}</el-tag>

						<el-button   class="tjlx" size="small" @click="componentsShow('bq')">+</el-button>

					</div>
 			</el-form-item> -->
 		</el-collapse-item>

 			<el-collapse-item accordion title="详细信息" name="1">
 			<!-- <el-form-item label="是否启用" class="select-block">
				<el-select v-model="visqy"  >
						  <el-option label="启用" value="Y"></el-option>
							<el-option label="禁用" value="N" ></el-option>
				</el-select>
 			</el-form-item> -->
 			<el-form-item label="年级班级" class="select-block">
 				<!-- <el-input v-model="vnjbj" placeholder="请输入年级班级" icon="add" ></el-input> -->
				<el-select v-model="vnjbj"   style='width: 100%;'>
						  <el-option label="一年级" value="1"></el-option>
							<el-option label="二年级" value="2" ></el-option>
							<el-option label="三年级" value="3" ></el-option>
							<el-option label="四年级" value="4" ></el-option>
							<el-option label="五年级" value="5" ></el-option>
							<el-option label="六年级" value="6" ></el-option>
							<el-option label="初一" value="7" ></el-option>
							<el-option label="初二" value="8" ></el-option>
							<el-option label="初三" value="9" ></el-option>
							<el-option label="高一" value="10" ></el-option>
							<el-option label="高二" value="11" ></el-option>
							<el-option label="高三" value="12" ></el-option>
				</el-select>

 			</el-form-item>
 			<el-form-item label="出生日期" class="select-block">
 				<!-- <el-input v-model="vcsrq" placeholder="请输入出生日期" icon="add" ></el-input> -->
				<el-date-picker  v-model="vcsrq"  type="date" placeholder="请选择出生日期" style="width:100%;" >  </el-date-picker>
 			</el-form-item>
 			<el-form-item label="父母手机号" class="select-block">
 				<el-input v-model="vfmdh" placeholder="请输入父母手机号" icon="add" ></el-input>
 			</el-form-item>
			<el-form-item label="微信号" class="select-block">
 				<el-input v-model="vwx" placeholder="请输入微信号" icon="add" ></el-input>
 			</el-form-item>
 			
 			<el-form-item label="公立学校" class="select-block">
						<el-input v-model="vglxx1" placeholder="请输入公立学校" icon="add"></el-input>
					</el-form-item>
					<!--<el-tag type="success" class="list1"   v-for="(v,index) in bqList">
 					{{v}}
 				<i class="el-icon-close del1" @click = "delbq(v)"></i>
 				</el-tag>-->
			<el-button type="" size="small" class="submit1" @click="componentsShow('bq',1)">。。。</el-button>
 			

 			<el-form-item label="家庭地址" class="select-block" style='width: 100%;'>
 				<el-input v-model="vjtdz" placeholder="请输入家庭地址" icon="add" ></el-input>
 			</el-form-item>

 			<el-form-item label="招生来源" class="select-block" style='width: 100%;'>
 				<el-input v-model="vzsly" placeholder="请输入招生来源" icon="add" ></el-input>
 			</el-form-item>
 			<el-form-item label="学生标签" class="select-block" style='width: 100%;'>
 				<el-tag type="success" class="list1"   v-for="(v,index) in bqList">
 					{{v}}
 				<i class="el-icon-close del1" @click = "delbq(v)"></i>
 				</el-tag> 
		          <el-button type="" size="small" class="submit" @click="componentsShow('bq')">+标签</el-button>
						
 			</el-form-item> 
 		    </el-collapse-item>
 		</el-collapse>

		</el-form>
<el-button type="primary" class="submit" @click="submit">保存</el-button>
		<BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>

	</el-dialog>
</template>

<script type="text/javascript">
	import qs from 'qs'
    import BqComponent from 'view/admin/xxjbszManage/bq'
	export default {
		components: {BqComponent },
 		props: ['params'],
        data () {
            return {
            	bqList:[],
            	vglxx1:'',
				vglxx2:[],
				vdh: '',
				vmm: '',
				vxb: '',
				vzwm: '',
				vywm: '',
				visqy: 'Y',
				vcsrq: '',
				vzsly: '',
				vfmdh: '',
				vwx: '',
				vjtdz: '',
				vglxx: '',
				vnjbj: '',
				vsklx:'xj',
				yuer:'',
				vxh: '',
				vbjid:'',
				vbjmc:'',
				activeNames:'1',
				ysbjid:'0',
				dialogTableVisible: true,
				ysbjList:[],
				bqlist:[],
				xsid:'',
				xszwm:'',
				id:'',
				portComponents: {
					bq: {
						type: 'bq',
						toggle: false,
						params: '',
						data: {}
					},
				}
            }
        },
        created () {
					 if(this.params){
						 this.vbjid = this.params.row.id;
						 this.vbjmc= this.params.row.mc;
					 }else{
						 this.vbjid = this.$route.query.iid
						 this.vbjmc = this.$route.query.mc
					 }
        },
        mounted () {
        },
       methods: {
       	delbq(bq){   
 				var dd =[];
 				  for ( let i in this.bqList ) {
 				  	if (this.bqList[i]==bq){
 				  		continue}else{
 				  		 dd.push(this.bqList[i]);
 				  	}
 				  }
 				  this.bqList= dd;
             },
			submit() {
				//检测
				this.$store.state.loading = true;
				if(!this.vzwm) {
					this.$message.warning('请填写中文名');
					this.$store.state.loading = false;
					return;
				} 
				else if(!this.ysbjid) {
					this.$message.warning('请选择预设班级');
					this.$store.state.loading = false;
					return;
				}
				else if(!this.vywm) {
					this.$message.warning('请填写英文名');
					this.$store.state.loading = false;
					return;
				}
			   /* if(!this.mc) {
					this.$message.warning('请填写分类名称');
					this.$store.state.loading = false;
					return;
				} */
				var time1 = this.$.getLocalTimeNo0(Date.parse(this.vcsrq));
		var logininfo = JSON.parse(localStorage.logininfo);
		var params3 = qs.stringify({
							dh: this.vdh,
							xb: this.vxb,
							zwm: this.vzwm,
							ywm: this.vywm,
							isqy: this.visqy,
							csrq: time1,
							zsly: this.vzsly,
							fmdh: this.vfmdh,
							wx: this.vwx,
							sklx: this.vsklx,
							jtdz: this.vjtdz,
							glxx: this.vglxx,
							njbj: this.vnjbj,
							bjid:this.vbjid,
							ysbjid:this.ysbjid,
							yuer:this.yuer,
							yhid: logininfo.id,
							xxid:logininfo.xxid
				});
				//执行
				this.axios.post(this.$store.state.api + 'xs/insert', params3)
					.then(res => {
						if(res.data.code == 1) {
							this.$emit('close', { type: 'tj', cancel: false });
							this.$store.state.loading = false;
						} else {
							this.$emit('close', { type: 'tj', cancel: false });
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.warning("服务器繁忙，请重试");
						this.$store.state.loading = false;
					})
			},
			cancel() {
				this.$emit('close', { type: 'tj', cancel: true })
			},
			componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id
                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;
                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
			componentsHide (setting) { //关闭组件 
				if(setting.name){
					this.portComponents.bq.toggle = false;
					for(let b in setting.clist) {
						this.vglxx2.push(setting.clist[b]);
						this.vglxx1 = this.vglxx2+''
					}
				}else{
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) { 
                       this.portComponents[i].toggle = false;  
                       if (this.portComponents[i].type=='bq'){ 
                       	  if (!setting.cancel) {  
                       	     for ( let b in setting.clist ) {
                       	   
                        	 this.bqList.push( setting.clist[b]);
                          }
                       	  
                       	  }
                       }else{
                        if (!setting.cancel) {  
                        }
                       }
                       return;
                    }
                }
                }
            }
		}
    }
</script>

<style lang="less" scoped>
    .wrap {
	    text-align: center;
     }
    .bt{
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		left: 0;
		background: #50BFFF;
		color:white;
		text-align:left;
		line-height: 50px;
		font-size: 16px;
		padding-left: 15px;
	}
    .input1 {
		width: 250px;
		display: inline-block;
	}
    .form {
			text-align: left;
			margin-top: 8px;
    }
    .input {
		width: 300px;
		display: inline-block;
    }
    .select-block1 {
		// display: block;
		float: left;
		width: 30%;
	}
    .select-block {
		// display: block;
		float: left;
		width: 45%;

   }
   .select-block2 {
		// display: block;
		float: left;
		width: 95%;
	.tjlx{
		// border: 1px solid #D3EEC7;
		// color: #67C23A;
		// border-radius: 5px;
		// text-align: center;
		// line-height: 30px;
	}
	.tjlx:hover{
		background-color: #67C23A;
		cursor:pointer;
		color: #fff;
	}
}

.submit {
	width: 120px;
	margin-top: 10px;
}
.submit1 {
		width: 85px;
		margin-top: 5px;
		float: left;
	}
</style>
